<!-- 里程碑-任务层次结构展示 -->
<div class="bg-white rounded-lg shadow">
    <div class="px-6 py-4 border-b border-gray-200">
        <h3 class="text-lg font-medium text-gray-900">里程碑-任务层次结构</h3>
    </div>
    <div class="p-6">
        {% if milestones_with_tasks or tasks_without_milestone %}
            <!-- 里程碑和任务列表 -->
            <div class="space-y-6">
                <!-- 遍历每个里程碑及其任务 -->
                {% for milestone_data in milestones_with_tasks %}
                <div class="border rounded-lg overflow-hidden">
                    <!-- 里程碑标题 -->
                    <div class="bg-gray-50 px-4 py-3 flex items-center justify-between">
                        <div class="flex items-center">
                            <i class="fas fa-flag text-blue-500 mr-2"></i>
                            <h4 class="font-medium text-gray-900">{{ milestone_data.milestone.name }}</h4>
                            <span class="ml-3 px-2 py-1 text-xs rounded-full 
                                {% if milestone_data.milestone.status == '未开始' %}bg-gray-100 text-gray-800
                                {% elif milestone_data.milestone.status == '进行中' %}bg-blue-100 text-blue-800
                                {% elif milestone_data.milestone.status == '已完成' %}bg-green-100 text-green-800
                                {% elif milestone_data.milestone.status == '已延期' %}bg-red-100 text-red-800
                                {% endif %}">
                                {{ milestone_data.milestone.status }}
                            </span>
                        </div>
                        <div class="flex items-center space-x-4 text-sm text-gray-500">
                            <span>截止日期: {{ milestone_data.milestone.due_date.strftime('%Y-%m-%d') if milestone_data.milestone.due_date else '未设置' }}</span>
                            <span>进度: {{ milestone_data.milestone.progress }}%</span>
                        </div>
                    </div>
                    
                    <!-- 里程碑描述 -->
                    {% if milestone_data.milestone.description %}
                    <div class="px-4 py-2 bg-gray-50 border-b border-gray-200">
                        <p class="text-sm text-gray-600">{{ milestone_data.milestone.description }}</p>
                    </div>
                    {% endif %}
                    
                    <!-- 任务列表 -->
                    {% if milestone_data.tasks %}
                    <div class="divide-y divide-gray-200">
                        {% for task in milestone_data.tasks %}
                        <div class="px-4 py-3 flex items-center justify-between hover:bg-gray-50">
                            <div class="flex items-center">
                                <i class="fas fa-tasks text-gray-400 mr-3"></i>
                                <div>
                                    <h5 class="font-medium text-gray-900">{{ task.name }}</h5>
                                    <div class="flex items-center mt-1 text-sm text-gray-500">
                                        <span class="mr-4">负责人: {{ task.assignee.name if task.assignee else '未分配' }}</span>
                                        <span class="mr-4">优先级: 
                                            <span class="px-1.5 py-0.5 text-xs rounded-full 
                                                {% if task.priority == '高' %}bg-red-100 text-red-800
                                                {% elif task.priority == '中' %}bg-amber-100 text-amber-800
                                                {% elif task.priority == '低' %}bg-green-100 text-green-800
                                                {% endif %}">
                                                {{ task.priority }}
                                            </span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-center space-x-2">
                                <span class="px-2 py-1 text-xs rounded-full 
                                    {% if task.status == '未开始' %}bg-gray-100 text-gray-800
                                    {% elif task.status == '进行中' %}bg-blue-100 text-blue-800
                                    {% elif task.status == '已完成' %}bg-green-100 text-green-800
                                    {% endif %}">
                                    {{ task.status }}
                                </span>
                                <span class="text-sm text-gray-500">{{ task.progress }}%</span>
                                <div class="flex space-x-1">
                                    <a href="{{ url_for('task.edit_task', task_id=task.id) }}" class="text-indigo-600 hover:text-indigo-900">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <div class="px-4 py-3 text-center text-sm text-gray-500">
                        该里程碑下暂无任务
                    </div>
                    {% endif %}
                </div>
                {% endfor %}
                
                <!-- 未关联里程碑的任务 -->
                {% if tasks_without_milestone %}
                <div class="border rounded-lg overflow-hidden">
                    <div class="bg-gray-50 px-4 py-3 flex items-center justify-between">
                        <div class="flex items-center">
                            <i class="fas fa-tasks text-gray-500 mr-2"></i>
                            <h4 class="font-medium text-gray-900">未关联里程碑的任务</h4>
                        </div>
                    </div>
                    <div class="divide-y divide-gray-200">
                        {% for task in tasks_without_milestone %}
                        <div class="px-4 py-3 flex items-center justify-between hover:bg-gray-50">
                            <div class="flex items-center">
                                <i class="fas fa-tasks text-gray-400 mr-3"></i>
                                <div>
                                    <h5 class="font-medium text-gray-900">{{ task.name }}</h5>
                                    <div class="flex items-center mt-1 text-sm text-gray-500">
                                        <span class="mr-4">负责人: {{ task.assignee.name if task.assignee else '未分配' }}</span>
                                        <span class="mr-4">优先级: 
                                            <span class="px-1.5 py-0.5 text-xs rounded-full 
                                                {% if task.priority == '高' %}bg-red-100 text-red-800
                                                {% elif task.priority == '中' %}bg-amber-100 text-amber-800
                                                {% elif task.priority == '低' %}bg-green-100 text-green-800
                                                {% endif %}">
                                                {{ task.priority }}
                                            </span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-center space-x-2">
                                <span class="px-2 py-1 text-xs rounded-full 
                                    {% if task.status == '未开始' %}bg-gray-100 text-gray-800
                                    {% elif task.status == '进行中' %}bg-blue-100 text-blue-800
                                    {% elif task.status == '已完成' %}bg-green-100 text-green-800
                                    {% endif %}">
                                    {{ task.status }}
                                </span>
                                <span class="text-sm text-gray-500">{{ task.progress }}%</span>
                                <div class="flex space-x-1">
                                    <a href="{{ url_for('task.edit_task', task_id=task.id) }}" class="text-indigo-600 hover:text-indigo-900">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}
            </div>
        {% else %}
            <!-- 无里程碑和任务时的提示 -->
            <div class="text-center py-8">
                <i class="fas fa-flag text-gray-400 text-4xl mb-4"></i>
                <p class="text-gray-500">该项目暂无里程碑和任务</p>
                <button onclick="document.getElementById('create-milestone-modal').classList.remove('hidden')" class="mt-4 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition">
                    <i class="fas fa-plus mr-2"></i>创建里程碑
                </button>
            </div>
        {% endif %}
    </div>
</div>